<template>
	<div>
		<div class="breadcrumb_wrap">
			<span class="current">当前位置：</span>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/personalcenter' }">个人中心</el-breadcrumb-item>
				<el-breadcrumb-item>我的喜欢</el-breadcrumb-item>
			</el-breadcrumb>
			<el-button style="position: absolute; right: 10px; top: 5px" type="primary" plain size="small"
				@click="toDoctorCertify">医生认证</el-button>
		</div>

		<div class="page_card">
			<articleShow hasDel :articleList='likeList' @delete="handleArticleDel" />
		</div>

	</div>
</template>

<script>
	import articleShow from "@/components/likeAndCollection.vue";
	export default {
		name: 'like',
		components: {
			articleShow
		},
		watch: {
			$route: {
				handler() {
					this.tabsActive = this.$route.query.tab;
				},
				deep: true,
			},
		},
		data() {
			return {
				tabsActive: 'like',
				likeList:[],
        hasDel:true
			}
		},
		mounted() {
			this.getLikeList();
		},
		methods: {
			handleArticleDel(ardId) {
          console.log(ardId);
          this.cancelLike(this.$cookies.get('userId'),ardId);
			},
			//跳转到医生认证
			toDoctorCertify() {
				this.$router.push("/doctorCertify");
			},
			async getLikeList(){
				const res = await this.$api.reqLikeList(this.$cookies.get('userId'));
				if(res.code===200){
					for(let i=0; i<res.rows.length; i++){
						res.rows[i].publishTime=this.timeFommater(res.rows[i].publishTime);
					}
					this.likeList=res.rows;
				}
			},
			timeFommater(value) {
				var dateee = new Date(value).toJSON();
				var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
				return date;
			},
      async cancelLike(userId,ardId){
        const res = await this.$api.reqCancelLikes(userId,ardId);
        if(res.code===200){
          this.$message({
            type: "success",
            message: "删除成功",
          });
        	this.getLikeList();
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
	.breadcrumb_wrap {
		width: 100%;
		height: 40px;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-left: 10px;
		box-sizing: border-box;

		.current {
			font-size: 14px;
		}
	}

	.page_card {
		background-color: #fff;
		margin-top: 20px;
		padding: 20px;
	}
</style>
